<template>
  <a-config-provider :locale="locale">
    <div id="app" :class="{'ie': isIe}">
           <router-view class="bpm-container" :class = "{'bpm-container-iframe':isInIframe}"/>  <!-- // 二开注释开始-->
                      <a-drawer
                        :closable="closable"
                        :visible="visible"
                        :maskClosable="maskClosable"
                        @close="closeDrawer"
                        class="formDrawer"
                        placement="right"
                        :width="drawerWidth"
                      >

                        <iframe :src="formUrl" ref="formIframe" frameborder="0" class="form-frame" style="width:100%;height:100vh" ></iframe>
                      </a-drawer>  <!-- // 二开注释结束 -->
    </div>
  </a-config-provider>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator"; // 二开注释


import OAuthApi from "@/apis/oauth";
import { ConfigProvider,Drawer } from '@h3/antd-vue'; // 二开注释 -- 增加了 Drawer

import env from "@/config/env";

import zhCN from "@h3/antd-vue/lib/locale-provider/zh_CN";
import enUS from "@h3/antd-vue/lib/locale-provider/en_US";

import app from "@cloudpivot/common/src/constants/globalApplication"

import 'moment/locale/zh-cn';

@Component({
  components: {
    AConfigProvider: ConfigProvider,
    ADrawer: Drawer //二开注释
  }
})
export default class App extends Vue {
formUrl: string = ""; //二开注释开始
  isInIframe: boolean = false;
  visible: boolean = false;
  maskClosable: boolean = true;
  closable: boolean = true;

  @Provide()
  showForm(formUrl: string) {
    this.formUrl = formUrl;
    this.visible = true;
  }
  get drawerWidth(){
    let width = 1024;
    // if(window.screen.width <= 1366)
    // {
    //   width = 1024;
    // }
    return width;
  }

  created() {

      window.addEventListener("message",(event) => {
      if(event.data == "close")
      {
        this.visible = false;

        (this as any).$eventBus.$emit("reloadList");
      }
    })

    this.isInIframe = window.top != window;
  }
  closeDrawer() {
    this.visible = false;
  }// 二开注释结束
  get locale() {
    switch (this.$i18n.locale) {
      case "zh":
      default:
        // return require('@h3/antd-vue/lib/locale-provider/zh_CN');
        return zhCN;

      case "en":
        // return require('@h3/antd-vue/lib/locale-provider/en_US');
        return enUS;
    }
  }

  get isIe() {
    if (window.Environment && window.Environment.isIe !== undefined) {
      return window.Environment.isIe;
    }
    return false;
  }

  async mounted() {
    const config = await OAuthApi.getSystemConfig();
    if (config) {
      config.apiHost = env.apiHost;
      this.$store.commit("setConfig", config);
    }
    app.errorManager.getErrorCode();
  }
}
</script>
<style lang="less">
body, #app {
  .form-frame {
    width: 100%;
    height: 100vh;
  }
  .h3-pivot-table {
    user-select: text;
  }
  .h3-report-list {
    user-select: text;
  }
}
</style>
